<template>
  <div>
    <van-sticky :offset-top="0">
      <van-search
        v-model="value"
        background="red"
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      />
    </van-sticky>
    <div style="margin-left: 10px">
      <h4>最近搜索:</h4>
      <van-tag
        style="margin: 2px"
        @click="tagClick(item)"
        v-if="tagList.size > 0"
        color="rgb(198 194 205)"
        text-color="rgb(133 125 125)"
        v-for="(item, index) in tagList"
        :key="index"
        >{{ item }}</van-tag
      >
      <van-divider />

      <h4>热门搜索:</h4>
      <van-tag
        style="margin: 2px"
        @click="tagClick(item)"
        v-if="hotTagList.size > 0"
        color="rgb(198 194 205)"
        text-color="rgb(133 125 125)"
        v-for="(item, index) in hotTagList"
        :key="index"
        >{{ item }}</van-tag
      >
      <van-empty image="error" description="没有搜到该商品,换个关键词试试吧!" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      tagList: new Set(),
      hotTagList: new Set(["你好", "我的"]),
    };
  },
  created() {
    this.load();
  },
  methods: {
    tagClick(item) {
      console.log(item);
    },
    onSearch() {
      this.tagList.add(this.value);
      localStorage.setItem("tag", JSON.stringify(Array.from(this.tagList).reverse()));
      this.load();
    },
    load() {
      const tag = localStorage.getItem("tag");
      if (!tag) {
        localStorage.setItem("tag", "[]");
      }
      this.tagList = new Set([...JSON.parse(tag)]);
      console.log(this.tagList);
    },
  },
};
</script>

<style scoped></style>
